<template>
  <div class="expertDetail basePageBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/expert' }">专家</el-breadcrumb-item>
      <el-breadcrumb-item>{{ expertInfo.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="expertInfos">
      <div class="expertInfos-content">
        <img
          class="expertImg"
          :src="$getImageUrl(expertInfo.originImg)"
          alt=""
        />

        <div class="expertBox">
          <div class="expertName">{{ expertInfo.name }}</div>
          <div class="designation">
            <div
              class="honorItem"
              v-for="(item, index) in honorList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="introduce">
            <span class="introduce-title">简介：</span
            ><span>{{ expertInfo.introduction }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="expertHonor">
      <CustomTitle title="荣誉风采"></CustomTitle>
      <div class="swiper_box">
        <Swiper class="swiper" :options="swiperOption">
          <SwiperSlide class="expertHonor__swiper-slide" v-for="(item, index) in deviceList" :key="index">
            <img
              :src="$getImageUrl(item.originImg)"
              alt=""
            />
          </SwiperSlide>

          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </Swiper>
      </div>
    </div>
  </div>
</template>

<script>
import CustomTitle from "@/components/CustomTitle.vue";
// import "swiper/dist/css/swiper.css";
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { getExpertDetails, getExpertPrizes } from "@/api/expert";

export default {
  components: { CustomTitle, Swiper, SwiperSlide },
  data() {
    return {
      objectId: null,
      expertInfo: {},
      honorList: [
        "湖北省优秀教师" ,
        "武汉市优秀教师" ,
        "xxxxx/title获奖" ,
      ],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },

      deviceList: [], //这是轮播图图片数组
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  beforeMount() {
    this.objectId = this.$route.query.objectId;
    console.log(this.objectId);
  },
  mounted() {
    this.getExpertInfo();
    this.getAllPrizes();
  },
  methods: {
    // 获取专家详情
    async getExpertInfo() {
      try {
        let params = {
          objectId: this.objectId,
        };
        const resData = await getExpertDetails(params);
        this.expertInfo = resData;
         console.log(resData);
        // 示例字符串
        this.honorList = this.splitTitle(resData.title);
        console.log(this.honorList );
       
      } catch (error) {
        console.error(error);
      }
    },

    // 获取所有奖项
    async getAllPrizes() {
      try {
        let params = {
          expertId: this.objectId,
        };
        const resData = await getExpertPrizes(params);
        this.deviceList = resData;
      } catch (error) {
        console.log(error);
      }
    },

    /* 前一步 */
    clickPrev() {
      const that = this;
      const length = that.deviceList.length;
      if (that.activeBtn <= 0 || length == 0) {
        return false;
      }
    },
    /* 后一步 */
    clickNext() {
      const that = this;
      const length = that.deviceList.length;
      if (that.activeBtn >= length - 1 || length == 0) {
        return false;
      }
    },

    // 处理职称
    splitTitle(arr) {
      const pattern = /[，,；;\s]+/;
      let splitArray = arr.split(pattern);
      splitArray = splitArray.filter((item) => item);
      return splitArray.slice(0, 3) || [];
    },
  },
};
</script>

<style lang="scss" scoped>
//  @import './base.scss';
.expertDetail {
  box-sizing: border-box;
  // padding-bottom: 50px;
  .el-breadcrumb {
    margin: 24px 0 24px 20px;
  }
  .expertInfos {
    // width: 600px;
    // height: 350px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // width: 100%;
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 30px;
    padding: 0 15%;
    background-image: url(../../assets/expertBg2.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 30px;

    &-content {
      // width: 100%;
      width: 740px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      .expertImg {
        width: 326px;
        height: 400px;
        border-radius: 8px;
      }
      .expertBox {
        box-sizing: border-box;
        width: 350px;
        height: 400px;
        display: flex;
        flex-direction: column;
        // justify-content: center;

        padding: 0 0 0 44px;
        .expertName {
          font-size: 32px;
          font-weight: 700;
          color: #121212;
          margin-bottom: 30px;
          // padding-left: 15px;
        }

        .designation {
          width: 100%;
          height: 240px;
          .honorItem {
            // box-sizing: border-box;
            width: 160px;
            height: 22px;
            line-height: 22.4px;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
            padding: 4px 10px;
            border-radius: 4px;
            background: linear-gradient(
              90deg,
              #afd1fa 0%,
              rgba(175, 209, 250, 0) 100%
            );
          }
        }

        .introduce {
          width: 374px;
          height: 144px;
          line-height: 25px;
          font-size: 16px;
          letter-spacing: 2px;
          overflow: hidden;

          &-title {
            font-weight: 700;
          }
        }
      }
    }
  }

  .expertHonor {
    margin-bottom: 15px;
    .swiper_box {
      width: 100%;
      // background: #fff;
      padding: 36px 0;
      // margin-top: 17px;
      img {
        width: 380px;
        height: 220px;
        object-fit: cover;
      }
    }
    &__swiper-slide {
      border: 1px solid #eee;
      height: 200px
    }
  }
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 28px !important;

  img {
    width: 380px;
    // height: 150px;
    object-fit: cover;
  }
}
</style>
